<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所属仓库" prop="warehouseCode" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.warehouseName"   style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="所属库区" style="margin-right:15px"  label-width="120px" prop="spaceCode">
              <el-input v-model="form.spaceName"   style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="库位编码" style="margin-right:15px"  label-width="120px" prop="serialNumber">
              <el-input v-model="form.serialNumber" placeholder="请输入库位编码" style="width:100%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="库位类型" style="margin-right:15px"  label-width="120px" prop="locationType">
              <el-select v-model="form.locationType" placeholder="请输入库位类型 " style="width:100%" clearable>
                <el-option
                  v-for="item in locationTypeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="库位承载类型" style="margin-right:15px"  label-width="120px" prop="bearType">
              <el-select v-model="form.bearType" placeholder="请选择库位承载类型 " style="width:100%" clearable>
                <el-option
                  v-for="item in bearTypeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="上架动线号" style="margin-right:15px"  label-width="120px" prop="shelvesNumber">
              <el-input v-model="form.shelvesNumber" placeholder="请输入上架动线号" style="width:100%"   maxlength="10"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="拣货动线号" style="margin-right:15px"  label-width="120px" prop="pickNumber">
              <el-input v-model="form.pickNumber" placeholder="请输入拣货动线号" style="width:100%"  maxlength="10"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="盘点动线号" style="margin-right:15px"  label-width="120px" prop="inventoryNumber">
              <el-input v-model="form.inventoryNumber" placeholder="请输入盘点动线号" style="width:100%"  maxlength="10"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="混放策略" style="margin-right:15px"  label-width="120px" prop="storageStrategy">
              <el-select v-model="form.storageStrategy" placeholder="请选择混放策略 " style="width:100%" clearable>
                <el-option
                  v-for="item in storageStrategyTypeData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="出入库锁" style="margin-right:15px"  label-width="120px" prop="ioLock">
              <el-select v-model="form.ioLock" placeholder="请选择出入库锁 " style="width:100%" clearable>
                <el-option
                  v-for="item in ioLockData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px"  label-width="120px">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%"  maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit"  :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { locationDetail, locationEdit } from '@/api/basicInfo'

Vue.use(VXETable)
export default {
  props:{
     //仓库列表
    warehouseData:{
      type: Array,
      required: true
    },
    operationCode:{
      type: String,
      required: true
    },
     //库位承载类型列表
    bearTypeData:{
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isDisable:false,   //确定键显示按钮        
      spaceData:[],               //库区列表
      locationTypeData:[          //库位类型列表
        { code: "0", name: "拣货" },
        { code: "1",name: "存货" },
        { code: "2",name: "集货" },
      ],       
      storageStrategyTypeData:[   //混放策略列表
        { code: "0", name: "商品混放" },
        { code: "1",name: "批次混放" },
        { code: "2",name: "混放" },
        { code: "3",name: "不混放" },
      ],
      ioLockData:[                //出入库锁列表
        { code: "0",name: "入库锁" },
        { code: "1",name: "出库锁" },
        { code: "2",name: "全锁" },
        { code: "3",name: "不锁" },
      ],
      form: {
        bearType:'',                            //库位承载类型 ,
        code:'',                                //数据标识 ,
        inventoryNumber:'',                     //盘点动线号 ,
        ioLock:'',                              //出入库锁 ,
        locationType:'',                        //库位类型 ,
        name:'',                                //库位名称 ,
        pickNumber:'',                          //拣货动线号 ,
        remarks:'',                             //备注 ,
        serialNumber:'',                        //编码 ,
        shelvesNumber:'',                       //上架动线号 ,
        spaceCode:'',                           //所属库区 ,
        status:'',                              //状态 ,
        storageStrategy:'',                     //存放策略 ,
        storageStrategyName:'',                     //存放策略 ,
        total:'',                               //总数 ,
        warehouseCode:'',                       //所属仓库
      },
        rules: {
          pickNumber:[
            { required: false, message: '拣货动线号必须填写' },
            { pattern: /^[1-9]+[0-9]*$/, message: '拣货动线号为大于0的正整数' },

          ],
          inventoryNumber:[
            { required: false, message: '盘点动线号必须填写' },
            { pattern: /^[1-9]+[0-9]*$/, message: '盘点动线号为大于0的正整数' }    ,

          ],

          shelvesNumber:[
            { required: false, message: '上架动线号必须填写' },
            { pattern: /^[1-9]+[0-9]*$/, message: '上架动线号为大于0的正整数' }    ,      

          ],

          locationType: [
            {required: true, message: '请输入库位类型', trigger: 'blur'},
          ],
          serialNumber: [
            {required: true, message: '请输入编码', trigger: 'blur'},
          ],
          warehouseCode: [
            {required: true, message: '请选择仓库', trigger: 'blur'},
          ],
          spaceCode: [
            {required: true, message: '请选择库区', trigger: 'blur'},
          ],
          bearType: [
            {required: true, message: '请选择库位承载类型', trigger: 'blur'},
          ],
          storageStrategy: [
            {required: true, message: '请选择存放策略', trigger: 'blur'},
          ],
          ioLock: [
            {required: true, message: '请选择出入库锁', trigger: 'blur'},
          ],
        },
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 获取页面信息
    getInfo() {
      locationDetail(this.operationCode).then(response => {
        this.form = response.data
      })
    },
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isDisable = true

          this.form.gmtCreated = '';
          this.form.gmtModified = '';
          const data = this.form
          locationEdit(data).then(response => {
            this.$message({ message: response.msg, type: 'success' })
            this.$emit('fatherEditMethod')
            this.form = {}
            this.isDisable = false
          }).catch(() => this.isDisable = false)
        } else {
          return false;
        }
      });

    },


    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'edit')
    }

  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
